<template>
  <pre style="padding-left: 0">  
      
      最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：
    <code class="language-Markup  line-numbers">
      <strong>文本插值</strong>
      &lt;span&gt; &#123;&#123; temp &#125;&#125; &lt;/span&gt;
      
      <strong>javascript表达式</strong>  每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码
      &lt;span&gt; &#123;&#123; number + 1 &#125;&#125;&lt;/span&gt;

      &lt;span&gt; &#123;&#123;ok ? 'YES' : 'NO' &#125;&#125;&lt;/span&gt;

      &lt;span&gt; &#123;&#123; message.split('').reverse().join('') &#125;&#125;&lt;/span&gt;
      
      <strong style="color:red">错误示例</strong>
      &lt;!-- 这是一个语句，而非表达式 --&gt;
      &#123;&#123; var a = 1 &#125;&#125;

      <strong>函数：绑定在表达式中的方法在组件每次更新时都会被重新调用</strong>
      &#123;&#123; formatDate(date) &#125;&#125;

    </code>
  </pre>
</template>
<script lang="ts" setup> 
import { onMounted } from "vue";
import Prism from "prismjs";
onMounted(()=>{
    Prism.highlightAll();
  })
</script>